<template>
  <section>
    <!--工具条-->
    <template v-if="is_search">
      <div class="searchgrid">
        <div style="float: right;">
          <input v-model="post_data.search.stock_finance_id" style="width:120px;height:20px;"
                 value="" maxlength="10" type="text" placeholder="搜索:子账户ID">
          <input v-model="post_data.search.stock_code" style="width:120px;height:20px;"
                 value="" maxlength="10" type="text" placeholder="搜索:证券代码">
          <input v-model="post_data.search.stock_name" style="width:120px;height:20px;"
                 value="" maxlength="10" type="text" placeholder="搜索:证券名称">
          <input class="yl-input-button" value=" 查询 " type="button" v-on:click="search">
        </div>

      </div>
    </template>

    <!--列表-->
    <el-table :data="forms.list"
              highlight-current-row
              v-loading="loading"
              style="width: 100%;">

      <el-table-column prop="stock_finance_id" label="账户ID" show-overflow-tooltip></el-table-column>
        <el-table-column prop="updated_time" min-width="130" label="更新时间" show-overflow-tooltip></el-table-column>
      <el-table-column prop="stock_code" label="证券代码" show-overflow-tooltip></el-table-column>
      <el-table-column prop="stock_name" label="证券名称" show-overflow-tooltip></el-table-column>
      <el-table-column prop="holdings_quantity" label="持仓数量" show-overflow-tooltip></el-table-column>
      <el-table-column prop="available_sell_quantity" label="可卖数量" show-overflow-tooltip></el-table-column>
      <el-table-column prop="total_sold_amount" label="累计卖出" show-overflow-tooltip></el-table-column>
      <el-table-column prop="avarage" label="买入均价" show-overflow-tooltip></el-table-column>
      <el-table-column prop="stock_info.price" label="最新价格"></el-table-column>
      <el-table-column prop="stock_total_amount" label="最新市值"></el-table-column>
      <el-table-column v-if="isUserSystemAdmin" prop="parent_stock_finance_id" label="母账号ID"></el-table-column>
      <el-table-column label="操作" min-width="120">
        <template scope="scope">
          <a href="javascript:void(0);" @click="openDeliveryStock(scope.row)">派股</a>
          <a href="javascript:void(0);" @click="doEveningUpPerHolding(scope.row)">平仓</a>
          <a href="javascript:void(0);" @click="openRetrieveStock(scope.row)">停牌回收</a>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <div class="pagination">
      <el-col :span="24" class="toolbar">
        <el-pagination
                @size-change="changeSize"
                @current-change="pageChange"
                :current-page="post_data.offset/post_data.limit+1"
                :page-sizes="[15, 30, 45, 60]"
                :page-size="post_data.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="forms.count"
                style="float:left;">
        </el-pagination>
      </el-col>
    </div>

    <!--手动派股票-->
    <el-dialog
            title="派股"
            custom-class="width30"
            :visible.sync="dialog1Visible"
            top="150px">
      <el-form :model="form1">
        <el-form-item label="用户信息" label-width="150px">
          <code> {{form1.client.nick_name + ' ' + form1.client.cellphone}}</code>
        </el-form-item>
        <el-form-item label="股票信息" label-width="150px">
          <code>{{form1.stock_code + ' ' + form1.stock_name}}</code>
        </el-form-item>
        <el-form-item label="配送数量" label-width="150px">
            <el-input size="small" style="width:200px" v-model.number="form1.deliveryStockAmount" auto-complete="off" min="0"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialog1Visible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="doDeliveryStock()">确 定</el-button>
            </span>
    </el-dialog>

    <el-dialog
            title="停牌回收"
            custom-class="width30"
            :visible.sync="dialog2Visible"
            top="150px">
      <el-form :model="form2" label-width="150px">
        <el-form-item label="股票信息">
          <code>{{form2.stock_code + ' ' + form2.stock_name}}</code>
        </el-form-item>
        <el-form-item label="当前股票价格" required>
          <el-input size="small" style="width:200px" v-model.number="form2.marketPrice" auto-complete="off" min="0" type="number">
          </el-input>
        </el-form-item>
        <el-form-item label="按市值回收比例" required>
            <el-input size="small" style="width:200px" v-model.number="form2.retrievePercentage" auto-complete="off" min="0" max="100" type="number">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialog2Visible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="doRetrieveStock()">确 定</el-button>
            </span>
    </el-dialog>
  </section>
</template>

<script type="text/ecmascript-6">
    import {eveningUpPerHolding, postDeliveryStock, postRetrieveStock} from '../../../api/java'
    import {getUStockFinanceHoldings} from '../../../api/trade';
    export default {
        props: ['sfid', 'no_search'],
        data() {
            return {
                is_search: true,
                dialog1Visible: false,
                dialog2Visible: false,
                loading: false,
                forms: {},
                form1: {client: ''},
                form2: {},
                post_data: {
                    field: ['*', '"" as avarage', '"" as stock_info', '"" as stock_total_amount'],
                    search: {
                        stock_finance_id: '',
                        stock_code: '',
                        stock_name: '',
                    },
                    where: {
                        stock_finance_id: this.sfid,
                    },
                    count: true,
                    offset: 0,
                    limit: 15,
                    client: {
                        field: ['id', 'nick_name', 'cellphone']
                    }
                },
                order: 'id desc'
            }
        },
        created(){
            if (this.sfid) this.is_search = false;
            if (this.$route.params.sfid) {
                this.is_search = false;
                this.post_data.where.stock_finance_id = this.$route.params.sfid;
            }
            this.getList();
        },
        methods: {
            getList: function () {
                this.loading = true;
                getUStockFinanceHoldings(this.post_data).then(res => {
                    this.loading = false;
                    if (res.status === 0) return this.ezNotifyAxiosThen(res);
                    this.forms = res.data;
                }).catch(error => this.ezNotifyAxiosCatch(error));
            },
            pageChange: function (index) {
                this.post_data.offset = (index - 1) * this.post_data.limit;
                this.getList();
            },
            changeSize: function (num) {
                this.post_data.offset = 0;
                this.post_data.limit = num;
                this.getList();
            },
            search: function () {
                this.post_data.offset = 0;
                this.getList();
            },
            openDeliveryStock: function (row) {
                this.dialog1Visible = true;
                this.form1 = row;
            },
            openRetrieveStock: function (row) {
                this.dialog2Visible = true;
                this.form2 = row;
            },
            doDeliveryStock: function () {
                this.$confirm('确认要派股吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    postDeliveryStock({stockFinanceHoldId: this.form1.id, deliveryStockAmount: this.form1.deliveryStockAmount}).then((res) => {
                        this.ezNotifyAxiosThen(res);
                        this.loading = false;
                        this.dialog1Visible = false;
                    }).catch(error => this.ezNotifyAxiosCatch(error));
                }).catch(() => {
                });
            },
            doRetrieveStock: function () {
                this.$confirm('确认要回收吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    postRetrieveStock({stockFinanceHoldId: this.form2.id, marketPrice: this.form2.marketPrice, retrievePercentage: this.form2.retrievePercentage / 100}).then((res) => {
                        this.ezNotifyAxiosThen(res);
                        this.loading = false;
                        this.dialog2Visible = false;
                    }).catch(error => this.ezNotifyAxiosCatch(error));
                }).catch(() => {
                });
            },
            doEveningUpPerHolding: function (row) {
                this.$confirm('确认要平仓吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    eveningUpPerHolding({id: row.id}).then((res) => {
                        this.ezNotifyAxiosThen(res);
                        this.loading = false;
                    }).catch(error => this.ezNotifyAxiosCatch(error));
                }).catch(() => {
                });
            }
        }
    }
</script>

<style scoped>
</style>
